<template>
    <div class="base-info">
        <a-card class="card">
            <a-form
                :model="state.formState"
                :label-col="{ span: 4 }"
                autocomplete="off"
                layout="vertical"
                ref="formRef"
            >
                <a-form-item
                    label="表单名称"
                    name="formName"
                    :rules="[{ required: true, message: '输入表单名称!',trigger: 'blur'  }]"
                >
                    <a-input v-model:value="state.formState.formName" />
                </a-form-item>
                <a-form-item
                    label="表单地址"
                    name="formUrl"
                    :rules="[{ required: true, message: '输入表单URL!' ,trigger: 'blur' }]"
                >
                    <a-input v-model:value="state.formState.formUrl" />
                </a-form-item>
                <a-form-item
                    label="分组"
                    name="groupId"
                    :rules="[{ required: true, message: '选择分组!' ,trigger: 'change' }]"
                >
                    <a-select
                        v-model:value="state.formState.groupId"
                        show-search
                        placeholder=""
                        :options="options"
                        allowClear
                        @change="handleChange"
                    ></a-select>
                </a-form-item>
                <a-form-item
                    label="备注"
                    name="memo"
                >
                    <a-textarea v-model:value="state.formState.memo" placeholder="" :rows="4" />
                </a-form-item>
                <a-form-item
                    label="状态"
                    name="status"
                >
                    <a-switch 
                        checked-children="启用" 
                        un-checked-children="禁用" 
                        v-model:checked="state.formState.status" 
                        :checkedValue="StatusEnum.ENABLE" 
                        :unCheckedValue="StatusEnum.DISABLE"
                    />
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { apiGetGroupWfFlowFormList } from '@/api/flow/wfGroup';
import type { ResType } from '@/api/types';
import { StatusEnum } from '@/const';
import type { apiGetGroupWfFlowFormListType } from '@/views/flow/flowSetting/types';
import type { FormInstance } from 'ant-design-vue';
import { onBeforeMount, reactive, ref } from 'vue';

const formRef = ref<FormInstance>()

const state =reactive({
    formState:{
        formName:"",
        formUrl:"",
        groupId:"",
        memo:"",
        status:StatusEnum.ENABLE,
        id:null as null | number,
        flowId:null as null | number,
    }
})
const options= ref<any[]>([
])
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const getBasicInfoData = async ()=>{
    await formRef.value?.validate()
    return state.formState
}

const setBasicInfoData = (data:any)=>{
    Object.assign(state.formState,data)
}

const handlqQuery = async()=>{
    const res = await apiGetGroupWfFlowFormList() as ResType<apiGetGroupWfFlowFormListType[]>
    options.value = res.data.result.map((item)=>{
        return {
            value:item.id,
            label:item.name
        }
    })
}

onBeforeMount(()=>{
    handlqQuery()
})

defineExpose({
    getBasicInfoData,
    setBasicInfoData
})
</script>

<style lang='scss' scoped>
.base-info{
    display: flex;
    justify-content: center;
    height: 100%;
    .card{
        width: 40%;
        height: 100%;
        padding: 25px;
    }
}
:deep(.ant-form-item){
    margin-bottom: 10px;
}
</style>